<!-- Created by duwanfu on 2018/12/8 -->
<template>
  <div class="wraper">
    <div class="header"></div>
    <div class="tabs">
      <div v-for="(item, i) in tabs"
           :key="i"
           @click="tabsHandle(i, item.timeType)"
           :class="['tabs-week', i===tabIndex ? 'tabsActive' : '']">
        {{item.name}}
      </div>
    </div>
    <div v-if="list.length"
         class="ranking-list">
      <div class="lister"
           v-for="(item, i) in list">
        <div class="rank-logo fl"></div>
        <div class="rank-avatar fl">
          <img :src="item.headimgurl" alt="">
        </div>
        <div class="rank-name fl">{{item.nikeName}}name</div>
        <div class="rank-money fr">￥{{ item.amount == 0 ? '0.00' : item.amount }} 88</div>
      </div>
    </div>
    <div class="ranking-list-no" v-else>
      <span>暂无数据~</span>
    </div>
    <div class="footer">
      <div class="self">
        <img :src="mineInfo.headPortrait" alt="">
      </div>
      <div class="info">
        <p>{{mineInfo.name}}</p>
        <p>{{tabIndex === 0 ? '本周' : '总'}}收益：￥{{mineInfo.amount || '0.00'}}</p>
        <p>{{tabIndex === 0 ? '本周' : '总'}}排名：{{mineInfo.ranking || '还很遥远'}}</p>
      </div>
      <div @click="goInvite" class="invite">
        邀请好友赚钱冲榜
      </div>
    </div>
  </div>
</template>

<script>
  import { browserMixin } from '../../assets/js/mixin'

  export default {
    name: "ranking",
    mixins: [browserMixin],
    data() {
      return {
        tabs: [
          {
            name: '本周收益榜',
            timeType: 2
          },
          {
            name: '总收益榜',
            timeType: 0
          }
        ],
        tabIndex: 0,
        list: [],
        mineInfo: {
          headPortrait: null,
          name: null,
          amount: null,
          ranking: null
        }
      }
    },
    mounted() {
      this.getRankList(2);
    },
    methods: {
      tabsHandle(i, timeType) {
        if (this.tabIndex == i) return;
        this.tabIndex = i
        this.getRankList(timeType)
      },
      getRankList(timeType) {
        let params = {
          timeType: timeType,
          dataType: 1
        }
        this.$http.getRankList(params).then(res => {
          console.log('res', res);
          if (res.code === '200') {
            let list = res.data.list
            let mine = res.data.mine
            this.list = list
            this.mineInfo.headPortrait = mine.headimgurl
            this.mineInfo.name = mine.nikeName
            this.mineInfo.ranking = mine.ranking
            this.mineInfo.amount = mine.amount
          }
        })
      },
      goInvite () {
        if(window.android) {
          window.android.goInvite()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wraper {

    .header {
      width: 100%;
      height: 3rem;
      background: url("../../assets/imgs/ranking-banner.png") no-repeat;
      background-size: cover;
    }
    .tabs {
      display: flex;
      margin: .2rem auto;
      width: 5rem;
      height: .9rem;
      border-radius: .45rem;
      overflow: hidden;
      border: 1px solid #5c6de9;
      & > div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: .28rem;
        font-weight: 700;
      }
      .tabsActive {
        color: #ffffff;
        background: #5c6de9;
      }
    }
    .ranking-list {
      .lister {
        width: 90%;
        height: 1.2rem;
        box-sizing: border-box;
        padding-right: .4rem;
        /*background: #5a74ec;*/
        background: linear-gradient(top, #5396f5, #5a70eb);
        box-shadow: 0 0 20px rgba(90, 112, 235, .2);
        margin: 0 auto .2rem;
        border-radius: .12rem;
        color: #ffffff;
        font-weight: 700;
        &:nth-child(1) .rank-logo {
          background: url("../../assets/imgs/icon-1.png") no-repeat center;
          background-size: .64rem .8rem;
        }
        &:nth-child(2) .rank-logo {
          background: url("../../assets/imgs/icon-2.png") no-repeat center;
          background-size: .64rem .8rem;
        }
        &:nth-child(3) .rank-logo {
          background: url("../../assets/imgs/icon-3.png") no-repeat center;
          background-size: .64rem .81rem;
        }
        &:nth-child(4) .rank-logo {
          background: url("../../assets/imgs/icon-4.png") no-repeat center;
          background-size: .16rem .22rem;
        }
        &:nth-child(5) .rank-logo {
          background: url("../../assets/imgs/icon-5.png") no-repeat center;
          background-size: .15rem .23rem;
        }
        &:nth-child(6) .rank-logo {
          background: url("../../assets/imgs/icon-6.png") no-repeat center;
          background-size: .15rem .23rem;
        }
        &:nth-child(7) .rank-logo {
          background: url("../../assets/imgs/icon-7.png") no-repeat center;
          background-size: .15rem .22rem;
        }
        &:nth-child(8) .rank-logo {
          background: url("../../assets/imgs/icon-8.png") no-repeat center;
          background-size: .15rem .23rem;
        }
        &:nth-child(9) .rank-logo {
          background: url("../../assets/imgs/icon-9.png") no-repeat center;
          background-size: .15rem .22rem;
        }
        &:nth-child(10) {
          .rank-logo {
            background: url("../../assets/imgs/icon-10.png") no-repeat center;
            background-size: .31rem .23rem;
          }
        }
        &:last-child {
          margin-bottom: 1.8rem;
        }
        .rank-logo {
          width: 1rem;
          height: 100%;
        }
        .rank-avatar {
          width: .8rem;
          height: .8rem;
          background: #9ab4f6;
          border-radius: 50%;
          overflow: hidden;
          margin-top: .2rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rank-name {
          margin-left: .2rem;
          height: 100%;
          line-height: 1.2rem;
          font-size: .28rem;
        }
        .rank-money {
          height: 100%;
          line-height: 1.2rem;
          font-size: .3rem;
        }
      }
    }
    .ranking-list-no {
      text-align: center;
      font-weight: bold;
      margin: 1.2rem 0;
    }
    .footer {
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      height: 1.6rem;
      width: 100%;
      padding: 0 .4rem;
      background: #5a70eb;
      .rank-logo {
      }
      .self {
        width: 1.1rem;
        height: 1.1rem;
        background: #eee;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        width: 2.2rem;
        margin-left: .2rem;
        font-size: .24rem;
        color: #ffffff;
        p {
          line-height: .35rem;
          font-weight: 700;
        }
      }
      .invite {
        width: 3rem;
        height: .8rem;
        border-radius: .4rem;
        background: #ff6262;
        font-weight: 700;
        line-height: .8rem;
        text-align: center;
        color: #ffffff;
        margin-left: .26rem;
      }
    }
  }
</style>
